<template>
    <div class="login">
        <div class="content">
            <a-form
                    :model="formState"
                    name="basic"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 18 }"
                    autocomplete="off"
                    @finish="onFinish">
                <a-form-item
                        label="账号："
                        name="username"
                        :rules="[{ required: true, message: '请输入账号！' }]">
                    <a-input v-model:value="formState.username"/>
                </a-form-item>

                <a-form-item
                        label="密码："
                        name="password"
                        :rules="[{ required: true, message: '请输入密码！' }]">
                    <a-input-password v-model:value="formState.password"/>
                </a-form-item>

                <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 18 }">
                    <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
                    <a-button type="primary" html-type="submit">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
import {$login} from '../api/login'

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Login",
    data() {
        return {
            // 表单数据
            formState: {
                // 用户名
                username: "",
                // 密码
                password: "",
                // 记住我
                remember: false
            }
        }
    },
    methods: {
        onFinish(values) {
            // console.log('Success:', values)
            const {username, password} = values;
            $login({username,password})
        },
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, rgb(5, 57, 79), rgb(200, 235, 250));
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        padding: 20px;
        padding-bottom: 0;
        width: 500px;
        border: 1px solid #fff;
        border-radius: 6px;
    }
}
</style>